import axios from "axios";
import 'antd/dist/antd.css';
import { React, useState, useEffect, useRef } from "react";
import InterIP from "../../IP/IP";
import './integralDetails.css'
import { Outlet } from "react-router";
import { NavLink, useNavigate } from "react-router-dom";

import { Modal, Button } from "antd";

import IntegralModel from "../integralModel";

export default function IntegralDetails() {
  const number = useRef();
  const navigate = useNavigate();
  const [product, setProduct] = useState([]);
  const [buyNum, setBuyNum] = useState(1);
  const [buy_Number, setBuyNumber] = useState(1)
  let IP = InterIP().props.children;
  useEffect(() => {
    let IP = InterIP().props.children;
    let integralId = localStorage.getItem('integralId')
    axios.post('http://' + IP + ':3000/index/selIntegral/single', {
      integral_id: integralId,
    }).then((res) => {
      setProduct((product) => product = res.data);
    })


  }, [])
  //添加确认订单
  const [isModalVisible1, setIsModalVisible1] = useState(false);

  const showModal1 = (e) => {
    setIsModalVisible1(true);
    e.target.style.color = '#fff'
  };

  const handleOk1 = () => {
    setIsModalVisible1(false);
  };
  const handleCancel11 = () => {
    setIsModalVisible1(false);
  };
  function Num(num) {
    setBuyNum((buyNum) => buyNum = num)
  }
  const handleCancel = (store_name, integral_name, product_number, specification, integral_id, integral_price, integral_img) => {
    return () => {
      setIsModalVisible1(false);
      let userId = document.cookie.slice(5);
      axios.post('http://' + IP + ':3000/index/ensure', {
        store_name: store_name,
        user_id: userId,
        totalPrice: integral_price * buyNum,
        product: '{"product_name":"' + integral_name + '","product_number":' + product_number + ',"product_specification":"' + specification + '","product_price":' + integral_price + ',"product_img":"' + integral_img + '","buy_number":' + buyNum + ',"product_id":' + integral_id + '}'
        ,
      }).then((res) => {
        navigate('/home/integralcart')
      })

    }
  };

  function clickNumMinus() {
    if (number.current.value <= 1) {
    } else {
      number.current.value--;
      setBuyNumber((buy_Number) => buy_Number = number.current.value)
    }
  }
  function clickNumAdd() {
    number.current.value++;
    setBuyNumber((buy_Number) => buy_Number = number.current.value)
  }
  return (
    <div>
      <div className="lfy_productDetails">
        {product.map((data, k) =>
          <div className="lfy_productDetails_up" key={k}>
            <div className="lfy_productDetails_up_Img">
              <div className="lfy_productDetails_up_bigImg">
                <img src={data.integral_img} alt="" />
              </div>
              <div className="lfy_productDetails_up_smallImg">
                <h6> </h6>
                <div>
                  <img src={data.integral_img} alt="" />
                </div>
                <div>
                  <img src={data.integral_img} alt="" />
                </div>
                <div>
                  <img src={data.integral_img} alt="" />
                </div>
                <div>
                  <img src={data.integral_img} alt="" />
                </div>
                <h6> </h6>
              </div>
            </div>
            <div className="lfy_productDetails_up_introduce">
              <header className="lfy_productDetails_up_introduce_header">
                <h6>{data.integral_name}</h6>
                <h4>
                  <div>全国</div>
                  <div>积分兑换</div>
                  <div>自营</div>
                </h4>
              </header>
              <div className="lfy_productDetails_up_introduce_body">
                <div>{data.integral_introduce}
                </div>
              </div>
              <div className="lfy_productDetails_up_introduce_buySize">
                <h6 className="lfy_productDetails_up_introduce_buySize_price">
                  <span className="clear">现价:{data.integral_price}积分</span>
                  <span className="clear">原价:￥{data.original_price}</span>
                </h6>
                <h6 className="lfy_productDetails_up_introduce_buySize_specification">
                  <span className="clear">请选择规格</span>
                  <span className="clear">{data.product_number}{data.specification}</span>
                </h6>
                <div className="lfy_productDetails_up_introduce_buySize_submit">
                  <div className="lfy_productDetails_up_introduce_buySize_number">
                    <span>数量: </span>
                    <div onClick={clickNumMinus}>-</div>
                    <input type="text" defaultValue="1" ref={number}></input>
                    <div onClick={clickNumAdd}>+</div>
                    <span> 件</span>
                  </div>
                  <div className="lfy_productDetails_up_onceBuy">
                    <Button type="text" onClick={showModal1} className="cart">
                      立即兑换
                    </Button>
                    <Modal
                      width={700}
                      height={700}
                      title="请选择商品"
                      visible={isModalVisible1}
                      onOk={handleOk1}
                      onCancel={handleCancel11}
                      footer={[<Button className="tyc_add_cart_btn" onClick={handleCancel(
                        data.store_name,
                        data.integral_name,
                        data.product_number,
                        data.specification,
                        data.integral_id,
                        data.integral_price,
                        data.integral_img,
                      )} key={k + 1}>去结算</Button>]}>
                      <IntegralModel number={Num} buyNumber={buy_Number} />
                    </Modal>
                  </div>
                </div>
                <div className="lfy_productDetails_up_introduce_buySize_collect">
                  <div className="lfy_productDetails_up_introduce_buySize_collect_div2">
                    分享到:
                  </div>
                </div>
              </div>
            </div>
          </div>

        )}
        <div className="lfy_productDetails_down">
          <h6>
            <div><NavLink to="/home/integralDetails">商品详情</NavLink></div>
            <div><NavLink to="/home/integralDetails/evaluate">商品评价</NavLink></div>
          </h6>
          <div>
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>

  )

}



